import 'dart:ui';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_learn_vi/src/page/login/view/button_border_white_widget.dart';
import 'package:flutter_learn_vi/src/utils/navigator_utils.dart';

import 'bofang_login2_page.dart';
import 'bofang_register2_page.dart';

/// 创建人： Created by zhaolong
/// 创建时间：Created by  on 2020/11/22.
///
/// 可关注公众号：我的大前端生涯   获取最新技术分享
/// 可关注网易云课堂：https://study.163.com/instructor/1021406098.htm
/// 可关注博客：https://blog.csdn.net/zl18603543572
/// 西瓜视频 https://www.ixigua.com/home/3662978423
/// 知乎 https://www.zhihu.com/people/zhao-long-90-89
///
///
/// 气泡背景的登录页面

void main() => runApp(
      MaterialApp(
        home: BoFangLoginPage(),
      ),
    );

class BoFangLoginPage extends StatefulWidget {
  @override
  _BoFangLoginPageState createState() => _BoFangLoginPageState();
}

class _BoFangLoginPageState extends State<BoFangLoginPage>
    with TickerProviderStateMixin, WidgetsBindingObserver {
  //渐变动画
  AnimationController _fadeAnimationController;

  @override
  void initState() {
    super.initState();
    //添加监听
    WidgetsBinding.instance.addObserver(this);
    _fadeAnimationController = new AnimationController(
        vsync: this, duration: Duration(milliseconds: 500));

    _fadeAnimationController.addStatusListener((status) {});
    //重复执行动画
    _fadeAnimationController.forward();
    // _userNameController.text = "ceshi1";
    // _passwordController.text = "123456";
  }

  @override
  void dispose() {
    //解绑
    WidgetsBinding.instance.removeObserver(this);
    _fadeAnimationController.dispose();
    super.dispose();
  }

  bool _showInputBg = false;

  //应用尺寸改变时回调
  @override
  void didChangeMetrics() {
    super.didChangeMetrics();
    /*
     *Frame是一次绘制过程，称其为一帧，
     * Flutter engine受显示器垂直同步信号"VSync"的驱使不断的触发绘制，
     *Flutter可以实现60fps（Frame Per-Second），
     * 就是指一秒钟可以触发60次重绘，FPS值越大，界面就越流畅。
     */
    WidgetsBinding.instance.addPostFrameCallback((_) {
      //注意，不要在此类回调中再触发新的Frame，这可以会导致循环刷新。
      setState(() {
        ///获取底部遮挡区域的高度
        double keyboderFlexHeight = MediaQuery.of(context).viewInsets.bottom;
        print("键盘的高度 keyboderFlexHeight $keyboderFlexHeight");
        if (MediaQuery.of(context).viewInsets.bottom == 0) {
          //关闭键盘 启动logo动画反向执行 0.0 -1.0
          // logo 布局区域显示出来
          setState(() {
            _showInputBg = false;
          });
        } else {
          //显示键盘 启动logo动画正向执行 1.0-0.0
          // logo布局区域缩放隐藏
          setState(() {
            _showInputBg = true;
          });
        }
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      ///填充布局
      body: Stack(
        alignment: Alignment.center,
        children: [
          //第一部分 第一层 渐变背景
          Positioned.fill(child: buildBackground()),
          //第三部分 高斯模糊
          buildBlureWidget(),
          //第四部分 顶部的文字 logo 的Hero动画
          buildHeroLogo(context),

          Positioned(
            left: 44,
            right: 44,
            bottom: 100,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                ButtonBorderWidget(
                  heroTag: "loginButton",
                  hasBorder: true,
                  buttonLabel: '登 录',
                  onTap: () {
                    NavigatorUtils.openPageByFade(
                      context,
                      BofangLogin2Page(),
                      isReplace: true,
                    );
                  },
                ),
                SizedBox(
                  height: 40,
                ),
                ButtonBorderWidget(
                  heroTag: "registerButton",
                  hasBorder: true,
                  buttonLabel: '注 册',
                  onTap: () {
                    NavigatorUtils.openPageByFade(
                      context,
                      BofangRegister2Page(),
                      isReplace: true,
                    );
                  },
                )
              ],
            ),
          )
        ],
      ),
    );
  }

  Positioned buildCloseButton(BuildContext context) {
    return Positioned(
      top: 44,
      left: 10,
      child: CloseButton(
        onPressed: () {
          Navigator.of(context).pop();
        },
      ),
    );
  }

  Positioned buildHeroLogo(BuildContext context) {
    return Positioned(
      top: 120,
      left: 45,
      right: 45,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Hero(
            tag: "loginTag",
            child: Material(
              color: Colors.transparent,
              child: ClipOval(
                child: InkWell(
                  onTap: () {
                    Navigator.of(context).pop();
                  },
                  child: Image.asset(
                    "assets/images/2.0x/app_icon.png",
                    fit: BoxFit.fill,
                    width: 44,
                    height: 44,
                  ),
                ),
              ),
            ),
          ),
          SizedBox(
            width: 16,
          ),
          Text(
            '伯矿云学堂',
            textAlign: TextAlign.center,
            style: TextStyle(
              color: Colors.white,
              fontSize: 26.0,
              fontWeight: FontWeight.w600,
            ),
          ),
        ],
      ),
    );
  }

  //第一部分 第一层 渐变背景
  Widget buildBackground() {
    return Image.asset(
      "assets/images/2.0x/login_bg.webp",
      fit: BoxFit.fill,
    );
  }

  //第三部分 高斯模糊
  Widget buildBlureWidget() {
    return BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 0.3, sigmaY: 0.3),
      child: Container(
        color: Colors.black.withOpacity(0.1),
      ),
    );
  }
}
